<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片翻转</title>
    <style>
        .outside {
            width: 220px;
            height: 276px;
            cursor: pointer;
            margin: 50px auto;
            position: relative;
            perspective: 500px;
        }

        .outside img {
            max-width: 220px;
        }

        .front_img, .back_img {
            width: 100%;
            height: 100%;
            position: absolute;

            /* 子元素相对于父元素使用绝对定位，两个子元素都定位到同一个位置，实现重叠的效果 */
            top: 0;
            left: 0;
            perspective: 1000px;
            backface-visibility: hidden;
            transition: all 1.5s;
        }

        .back_img {
            transform: rotateY(180deg);
        }

        .outside:hover .front_img {
            transform: rotateY(180deg);
        }

        .outside:hover .back_img {
            /*鼠标悬浮在元素上时，前面一层的图片正旋转360度，实现前面的图片旋转到前面，达到显示的效果 */
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
<div>
    <div class="outside">
        <div class="front_img">
            <img src="https://img-blog.csdnimg.cn/20200928175435234.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hY3pfeW8=,size_16,color_FFFFFF,t_70#pic_center"
                 alt="front_picture"/>
        </div>
        <div class="back_img">
            <img src="https://img-blog.csdnimg.cn/20200928175433637.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hY3pfeW8=,size_16,color_FFFFFF,t_70#pic_center"
                 alt="back_ground"/>
        </div>
    </div>
</div>
</body>
</html>